<template>
  <div class="home">
    <div>fullScreen:{{fullScreen}}</div>
    <div>{{$store.state.count}}</div>
    <button @click="close">CLOSE</button>
    <button @click="open">OPEN</button>
    <div class="img-cells" v-if="false">
      <div class="img-cell" v-for="item in imgs" :key="item" :style="{'background-image': 'url('+item+')'}"
           :data-url="item" @click="imgClick(item)"></div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  import $ from 'jquery'
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'home',
    components: {},
    computed: {
      ...mapGetters(['count', 'fullScreen'])
    },
    data() {
      return {
        imgs: []
      }
    },
    mounted() {
      console.log('', this.$store.getters.fullScreen)
      // $(document).on('click', '.img-cell', function (e) {
      //   console.log($(e).index())
      //   console.log($('.img-cell').findIndex(e))
      // })
      setTimeout(() => {
        this.imgs = [
          '/imgs/1.jpg',
          '/imgs/2.jpeg',
          '/imgs/3.jpeg',
          '/imgs/4.jpg',
          '/imgs/5.jpg',
          '/imgs/6.jpg']
      }, 500)
    },
    methods: {
      close() {
        console.log('close')
        this.setFullScreen(false)
      },
      open() {
        console.log('open')
        this.setFullScreen(true)
      },
      ...mapMutations({
        setFullScreen: 'SET_FULL_SCREEN'
      }),
      imgClick(item) {
        let idx = this.imgs.findIndex(e => {
          return e === item
        })
        console.log('idx', idx)
        let $mask = $(`<div class="mask"></div>`)
        let $dialog = $(`<div class="dialog" id="dialogCnt">
            <div class="dialog-img" id="dialogImg" ></div>
            <div class="dialog-btn btn-l" id="dialogBtnL">&lt;</div>
            <div class="dialog-btn btn-r" id="dialogBtnR">&gt;</div>
            <div class="dialog-btn btn-close" id="dialogBtnClose">&times;</div>
          </div>`)
        $mask.appendTo('body')
        $dialog.appendTo('body')
        this.getImg(idx)
        this.$nextTick(() => {
          let dialogImg = document.getElementById('dialogImg')
          let dialogFlag = false
          let oX = 0, oY = 0, nX = 0, nY = 0, nX2 = 0, nY2 = 0
          let imgScale = 1
          let transform = {
            translate: '',
            scale: ''
          }
          document.getElementById('dialogBtnL').addEventListener('click', () => {
            idx -= 1
            dialogFlag = false
            oX = 0
            oY = 0
            nX = 0
            nY = 0
            nX2 = 0
            nY2 = 0
            imgScale = 1
            transform = {
              translate: '',
              scale: ''
            }
            dialogImg.style.transform = transform.translate + transform.scale
            this.getImg(idx)
          }, false)
          document.getElementById('dialogBtnR').addEventListener('click', () => {
            idx += 1
            dialogFlag = false
            oX = 0
            oY = 0
            nX = 0
            nY = 0
            nX2 = 0
            nY2 = 0
            imgScale = 1
            transform = {
              translate: '',
              scale: ''
            }
            dialogImg.style.transform = transform.translate + transform.scale
            this.getImg(idx)
          }, false)
          document.getElementById('dialogBtnClose').addEventListener('click', () => {
            $mask.remove()
            $dialog.remove()
          }, false)
          dialogImg.addEventListener('mousedown', event => {
            console.log('onmousedown')
            dialogFlag = true
            oX = event.clientX
            oY = event.clientY
            console.log('oX', oX)
            console.log('oY', oY)
          }, false)
          dialogImg.addEventListener('mouseup', () => {
            console.log('mouseup')
            dialogFlag = false
            oX = 0
            oY = 0
            nX2 = nX
            nY2 = nY
          }, false)
          dialogImg.addEventListener('mousewheel', event => {
            console.log('mousewheel', event)
            let delta = 0;
            if (event.wheelDelta) {
              delta = event.wheelDelta / 120;
              if (window.opera) {
                delta = -delta;
              }
            } else if (event.detail) {
              delta = -event.detail / 3;
            }
            if (delta) {
              if (delta < 0) {
                //向下滚动 scale(2)
                imgScale -= 0.1
              } else {
                //向上滚动
                imgScale += 0.1
              }
              transform.scale = `scale(${imgScale})`
              dialogImg.style.transform = transform.translate + transform.scale
            }
          }, false)
          document.getElementById('dialogCnt').addEventListener('mousemove', event => {
            if (dialogFlag) {
              nX = event.clientX - oX + nX2
              nY = event.clientY - oY + nY2
              console.log('nX', nX)
              console.log('nY', nY)
              transform.translate = `translate(${nX}px,${nY}px)`
              dialogImg.style.transform = transform.translate + transform.scale
            }
          }, false)
          document.getElementById('dialogCnt').addEventListener('mouseout', () => {
            dialogFlag = false
            oX = 0
            oY = 0
            nX2 = nX
            nY2 = nY
          }, false)
        })
      },
      getImg(idx) {
        let that = this
        let screenWidth = window.screen.availWidth
        let screenHeight = window.screen.availHeight
        let img = new Image()
        img.src = this.imgs[idx]
        let scal = {
          width: img.width,
          height: img.height
        }
        if (img.width > screenWidth || img.height > screenHeight) {
          scal = that.scalingImage(img.width, img.height, screenWidth, screenHeight)
        }
        $('#dialogImg').css({width: scal.width, height: scal.height, backgroundImage: `url(${img.src})`})
        document.getElementById('dialogBtnR').style.visibility = (idx === this.imgs.length - 1 ? 'hidden' : 'visible')
        document.getElementById('dialogBtnL').style.visibility = (idx === 0 ? 'hidden' : 'visible')
      },
      scalingImage(imgWidth, imgHeight, containerWidth, containerHeight) {
        let containerRatio = containerWidth / containerHeight;
        let imgRatio = imgWidth / imgHeight;

        if (imgRatio > containerRatio) {
          imgWidth = containerWidth;
          imgHeight = containerWidth / imgRatio;
        } else if (imgRatio < containerRatio) {
          imgHeight = containerHeight;
          imgWidth = containerHeight * imgRatio;
        } else {
          imgWidth = containerWidth;
          imgHeight = containerHeight;
        }

        return {
          width: imgWidth,
          height: imgHeight
        }
      }
    }
  }
</script>
<style lang="stylus">
  .img-cells
    display flex
    justify-content center
    align-items center
    .img-cell
      width 200px
      height 200px
      border 1px solid #ccc
      box-sizing border-box
      background 50% 50% no-repeat
      background-size cover

  .mask
    position fixed
    background-color rgba(0, 0, 0, .8)
    z-index 9997
    width 100%
    height 100%
    left 0
    top 0

  .dialog
    position fixed
    width 100%
    height 100%
    background-color transparent
    z-index 9998
    top 0
    left 0
    box-sizing border-box
    background 50% 50% no-repeat
    background-size contain
    display flex
    align-items center
    justify-content center
    .dialog-img
      background 50% 50% no-repeat
      background-size 100% 100%
    .dialog-btn
      position absolute
      top 50%
      width 30px
      height 30px
      background-color aqua
      cursor pointer
      margin-top -15px
      z-index 9999
      &.btn-l
        left 0
      &.btn-r
        right 0
      &.btn-close
        top 0
        right 0
        background-color crimson
        color #ffffff
        margin-top 0
</style>
